<template>
	<view class="dui-tabbar-tips" :style="[tipsWrapperStyle]">
		<view class="dui-tips-content" :style="[tipsContentStyle]" v-html="tips"></view>
		<view class="dui-triangle" :style="[triangleStyle]"></view>
	</view>
</template>

<script>
export default {
	name: 'duiTabBarTips',
	data() {
		return {
			transform: '',
			triangleStyle: {
				borderTopColor: this.tipsBackgroud,
				transform: ''
			},
			maxWidthLatest: this.maxWidth
		};
	},
	props: {
		tips: String,
		tipsColor: {
			type: String,
			default: '#fff'
		},
		tipsFontSize: {
			type: String,
			default: '24rpx'
		},
		tipsBackgroud: {
			type: String,
			default: 'rgba(0, 0, 0, 0.6)'
		},
		tabBarCount: {
			type: Number,
			default: 2
		},
		tabBarIndex: {
			tyep: Number,
			default: 0
		},
		maxWidth: String
	},
	emits: [''],
	computed: {
		tipsContentStyle() {
			let left = 0;
			return {
				color: this.tipsColor,
				fontSize: this.tipsFontSize,
				background: this.tipsBackgroud
			};
		},

		tipsWrapperStyle() {
			const windowWidth = this.systemInfo.windowWidth;
			const translateX = ((+this.tabBarIndex * 2 + 1) / (+this.tabBarCount * 2)) * windowWidth;
			return {
				maxWidth: this.maxWidthLatest,
				transform: this.transform || `translateX(calc(${translateX}px - 50%))`
			};
		}
	},
	watch: {
		tips() {
			this.$nextTick(() => {
				this.undatePosition();
			});
		}
	},
	created() {
		this.systemInfo = uni.getSystemInfoSync();
	},
	mounted() {
		this.undatePosition();
	},
	methods: {
		getTipsRect() {
			return new Promise((resolve, rejct) => {
				// #ifndef MP-ALIPAY
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.dui-tabbar-tips')
					.boundingClientRect((rect) => {
						resolve(rect);
					})
					.exec();
				// #endif
				// #ifdef MP-ALIPAY
				my.createSelectorQuery()
					.select('.dui-tabbar-tips')
					.boundingClientRect()
					.exec((ret) => {
						resolve(ret[0]);
					});
				// #endif
			});
		},
		undatePosition() {
			this.getTipsRect().then((rect) => {
				const { left, right } = rect;
				const windowWidth = this.systemInfo.windowWidth;
				const gap = 5; //间隙
				if (left <= 0) {
					const translateX = 0 + gap;
					this.transform = `translateX(${translateX}px)`;
					this.triangleStyle.transform = `translateX(calc(${left - gap}px - 50%))`;
				}
				if (right >= windowWidth) {
					const translateX = left - (right - windowWidth) - gap;
					this.transform = `translateX(${translateX}px)`;
					this.triangleStyle.transform = `translateX(calc(${right - windowWidth + gap}px - 50%))`;
				}
			});
		}
	},
};
</script>

<style lang="scss" scoped>
.dui-tabbar-tips {
	position: fixed;
	/* #ifndef H5 */
	bottom: 20rpx;
	/* #endif */
	/* #ifdef H5 */
	bottom: 116rpx;
	/* #endif */
	left: 0;
	max-width: 97%;
	.dui-tips-content {
		padding: 10rpx;
		border-radius: 10rpx;
	}
	.dui-triangle {
		position: absolute;
		top: 100%;
		left: 50%;
		border: 10rpx solid transparent;
		border-top-color: rgba(0, 0, 0, 0.5);
		transform: translateX(-50%);
	}
}
</style>
